<template>
    <div class="comment_bottom">
        <!-- <div class="comment_name2">{{replyTYpe}}评论</div> -->
        <form>
            <span>评论:</span>
                <el-input
                  @blur="burFun1"
                  type="textarea"
                  :autosize="{ minRows: 2}"
                  placeholder="请输入内容"
                  v-model="form.comment">
                </el-input>   
            <span>姓名:</span>
                <el-input @blur="burFun2" v-model="form.name" placeholder="请输入姓名"></el-input>
            <span>邮箱:</span>
                <el-input @blur="burFun3" v-model="form.email" placeholder="请输入邮箱"></el-input>
        </form>
        <span v-if="showMes" class="msg">{{msg}}</span>
        <div class="senComment" @click="sendComment">{{replyTYpe}}评论</div>
    </div>
</template>

<script>
  export default {
    props:['id','replayId'], //id是文章的id, replayId是回复用户的id
    data(){
        return{
            showMes:false,
            replyTYpe:"发表",
            msg:'',
            form:{
                comment:'',
                name:'',
                email:''
            },  
        }
    },
    created(){
        if(this.replayId != null){
            this.replyTYpe="回复"
        }else{
            this.replyTYpe="发表"
        }
    },
    methods:{
    //   表单验证
      burFun1(){
        if(this.form.comment.trim().length == 0){
            this.showMes = true
            this.msg="评论内容不能为空"
        }else{
            this.showMes = false
            this.msg=""
        }         
      },
      burFun2(){
        if(this.form.name.trim().length == 0){
            this.showMes = true
            this.msg="昵称不能为空"
        }else{
            this.showMes = false
            this.msg=""
        }  
      },
      burFun3(){
          //验证内容
        var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/
        if(!reg.test(this.form.email)){
            this.showMes = true
            this.msg="邮箱格式不符合规范"
        }else{
            this.showMes = false
            this.msg=""
        }  
      },
      //发布评论信息
      async sendComment(){
        //整体检侧一遍表单
        this.burFun1()
        this.burFun2()
        this.burFun3()
        if(this.showMes == true) return
        let data = {
          content:this.form.comment,
          email:this.form.email,
          nickname:this.form.name,
          blogId:this.id,
          //parentCommentId:-1,
          adminComment: false
        }
        //如果是回复的话
        if(this.replayId != null){
            data.parentCommentId = this.replayId
        }
        const {data:res} = await this.$http.post('/blog/comment/comments',data)
        if(res.meta.status == 200){
          this.form.comment = ''
          this.form.email = ''
          this.form.name = ''
          this.$emit('getComments')
        }
      }
    }
  }
</script>

<style scoped>
 /* 表单输入错误信息 */
  .msg{
    display:inline-block;
    font-size:0.8rem;
    color:red;
    margin-bottom:20px;
    margin-top:-5px;
  }
  .comment_name2{
    margin-top:10px;
    margin-bottom:10px;
  }
  .comment_bottom{
      margin-top:30px;
      margin-bottom:30px;
  }
  .comment_bottom .el-input{
    display: inline-block;
    width:40%;
    margin-right:3%;
    margin-bottom:20px;
  }
  .comment_bottom .el-textarea{
    margin-top:10px;
    margin-bottom:20px;  
  }
  .comment_bottom span{
    margin-right:8px;
  }
  .senComment{
    background-color: #7fb442;
    color:white;
    border-radius:5px;
    width:80px;
    height:28px;
    cursor:pointer;
    text-align:center;
    line-height:28px;
  }
</style>